{% extends 'base.html' %}

{% block title %}
    惠房网-注册惠房用户
{% endblock %}

{% block styles %}
    {{ super() }}
    <!-- 引入注册页面的register.css样式文件 -->
    <link rel="stylesheet" href="{{ url_for('static',filename='css/user/register.css') }}">
{% endblock %}

{% block content %}
    {% block newcontent %}
        <!-- 头部 -->
        <div class="headers">
            <span class="index">
                <a href="{{ url_for('house_bp.index') }}?city={{ city }}">返回首页</a>
            </span>
            <span class="login">
                <a href="{{ url_for('user_bp.login') }}">已有账号?去登陆</a>
            </span>
        </div>
        <!-- 内容 -->
        <div id="container">
            <!-- logo模块 -->
            <div class="logo">
                <img src="{{ url_for('static',filename='images/hz_logo.png') }}" alt="">
                <span class="title">惠房</span>
            </div>
            <form class="form-horizontal" method="POST" action="{{ url_for('user_bp.register') }}">

                <div class="form-group">
                    <label for="inputUsername" class="col-md-3 control-label">用户名</label>
                    <div class="col-md-6">
                        <input type="text" class="form-control" id="inputUsername" placeholder="username" name="username">
                    </div>
                </div>

                <div class="form-group">
                    <label for="inputPassword" class="col-md-3 control-label">密码</label>
                    <div class="col-md-6">
                        <input type="password" class="form-control" id="inputPassword" placeholder="Password" name="password">
                        <p class="message">请输入6~16位密码</p>
                    </div>
                </div>

                <div class="form-group">
                    <label for="inputConfirm" class="col-md-3 control-label">确认密码</label>
                    <div class="col-md-6">
                        <input type="password" class="form-control" id="inputConfirm" placeholder="Confirm password" name="repassword">
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="inputPhone" class="col-md-3 control-label">手机号码</label>
                    <div class="col-md-6">
                        <input type="text" class="form-control" id="inputPhone" placeholder="phone number" name="phone">
                        <span class="message">请输入11位号码</span>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="inputEmail3" class="col-md-3 control-label">邮箱</label>
                    <div class="col-md-6">
                        <input type="email" class="form-control" id="inputEmail3" placeholder="Email" name="email">
                    </div>
                </div>

                <div class="form-group">
                    <div class="protocol">
                        注册即同意
                        <span>《惠房用户使用协议》</span>
                        &
                        <span>《隐私政策》</span>
                    </div>
                </div>

                <div class="form-group">
                <div class="col-sm-offset-4 col-md-15">
                    <button type="submit" class="btn btn-primary col-md-2">注&nbsp;&nbsp;&nbsp;&nbsp;册</button>
                    <button type="reset" class="btn btn-primary col-md-2 col-md-offset-2">重&nbsp;&nbsp;&nbsp;&nbsp;置</button>
                </div>
                </div>
            </form>
        </div>
    {% endblock %}
{% endblock %}

{# 添加js脚本 #}
{% block scripts %}
    {{ super() }}
    <script>
        {% if alerts %}
            alert('{{ alerts }}');
        {% endif %}

        // 获取元素（验证输入密码6-12位）
        var pwd = document.querySelector('#inputPassword');
        var message = document.querySelector('.message');
        // console.log(pwd);
        // 注册事件 失去焦点
        pwd.onblur = function() {
            // 根据表单里面值的长度 ipt.value.length
            if (this.value.length < 6 || this.value.length > 16) {
                // console.log('错误');
                message.className = 'message error';
                message.innerHTML = '您输入的位数不足以达到6~16位';
            } else {
                message.className = 'message correct';
                message.innerHTML = '您输入的正确';
            }
        };

        // 手机号码验证是否被注册
        $('#inputPhone').blur(function () {  // blur在一个页面内跳到指定的锚点位置
            let phone = $(this).val();
            let span_pro = $(this).next('span');
            if (phone.length == 11) {
                span_pro.text('');
                $.get("{{ url_for('user_bp.check_phone') }}", {phone: phone}, function (data) {
                    if (data.code != 200) {
                        span_pro.css({
                            "color": "#FF552E", "font-size": "12px", "background-image": "url(/static/images/wrong.png)",
                            "background-repeat": "no-repeat"
                        });
                        span_pro.text(data.error);
                    } else {
                        span_pro.css({
                            "background-image": "url(/static/images/right.png)","color": "green", "font-size": "12px",
                            "background-repeat": "no-repeat",
                        });
                        span_pro.text(data.error);
                    };
                });
            } else {
                span_pro.css({
                    "color": "#FF552E", "font-size": "12px", "background-image": "url(/static/images/wrong.png)",
                    "background-repeat": "no-repeat"});
                span_pro.text('手机格式错误');
            }
        })
    </script>
{% endblock %}